@font-face {
  font-family:@icon-font;
  src: url('http://at.alicdn.com/t/font_1420301920_9774508.eot'); /* IE9*/
  src: url('http://at.alicdn.com/t/font_1420301920_9774508.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('http://at.alicdn.com/t/font_1420301920_9774508.woff') format('woff'), /* chrome、firefox */
  url('http://at.alicdn.com/t/font_1420301920_9774508.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('http://at.alicdn.com/t/font_1420301920_9774508.svg#iconfont') format('svg'); /* iOS 4.1- */
}
@BASE-COLOR: #1abc9c;//模板主要色
@BASE-COLOR2:#F90;//模板主要色
//变量
@background: url('../Image/u180626987_139bab892dcg2_blog.jpg');//全局背景
@background-color: black;//全局背景色
@foot-background: url('../Image/u180626987_139bab89925g2_blog.jpg');//全局背景
@font-family:微软雅黑;//全局字体
@font-color:#ccc;//全局的字体颜色
@font-size:1rem;//全局的字体大小
//字体文件
@icon-font:"iconfont";
//超级链接的颜色
@a-color:@BASE-COLOR;
@a-hover-color:@BASE-COLOR2;
//边框颜色
@border-color:red;
//选中的背景色
@SELECT-BACKGROUND:black;
@SELECT-COLOR:red;
//全局框框
@rect-shadow:@BASE-COLOR/2.5;
@rect-background:rgba(0,0,0,0.5);
@rect-hover-background:rgba(0,0,0,0.2);
@rect-title-bckground:black;
@rect-title-color:@BASE-COLOR2;
@rect-border-radius:5px;

//复用的函数
.FlexSize(@size)
{
  flex: @size;
  -ms-flex: @size;
  -moz-box-flex: @size;
  -webkit-flex: @size;

}
.FlexFlow(@type:column)
{
  -webkit-flex-flow: @type;
  -ms-flex-flow: @type;
  flex-flow: @type;

}
.DisplayFlex{
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: box;
  display: flexbox;
  display: flex;
}
.line-overflow(@line:3){
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: @line;
  -webkit-box-orient: vertical;
  text-indent: 10px;
  text-overflow: -o-ellipsis-lastline;
}
.overflow(@width)
{
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  width: @width;
}

html, body {
  color: @font-color;
  border: 1px;
  margin: 0;
  padding: 0;
  font-family: @font-family;
  letter-spacing: 2px;
  font-size: 100%;
  background: @background-color;
  background: @background;
  /*
  background-repeat: no-repeat;
  background-size:cover;*/
}
::-webkit-scrollbar-thumb:vertical {
  height:10px;
  backgrund:@BASE-COLOR2;
  border-radius:10px
}
::-webkit-scrollbar {
  width:7px;
  height:5px;
  background:@BASE-COLOR;
  margin-right:15px
}
::-webkit-scrollbar-track {
  -webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.2);
  -webkit-border-radius:10px;
}
::-webkit-scrollbar-thumb {
  position:relative;
  min-height:25px;
  border-radius:9999px;
  background:linear-gradient(@BASE-COLOR,@BASE-COLOR2) repeat scroll 0 0 rgba(0,0,0,0);
  background-image:linear-gradient(@BASE-COLOR, @BASE-COLOR2);
  background-position-x:0;
  background-position-y:0;
  background-size:initial;
  background-repeat-x:repeat;
  background-repeat-y:repeat;
  background-attachment:scroll;
  background-origin:initial;
  background-clip:padding-box;
  background-color:rgba(0,0,0,0);
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: @font-size;
 }
.iconFont {
    font-family:@icon-font;
    font-size: .8rem;
    cursor: pointer
  }
li {
     list-style: none
   }
a {
  text-decoration: none;
  color: @a-color;
}
a:hover{
  color: @a-hover-color;
}
.input {
   border: 1px solid #333;
   height: 28px;
   line-height:28px;
   float:left;
   padding-left: 3px;
   margin-right:3px;
   margin-top:2px;
 }
/*主要容器*/
#Html_Container {
  width: 98%;
  margin: auto;
font-size:1.3rem;
  .FlexFlow(row wrap);
  .DisplayFlex;
      .border_radius {
            transition: all 1s;
            border-radius: @rect-border-radius;
            background:@rect-background;
            box-sizing: border-box;
            box-shadow: 0 0 5px 2px @rect-shadow;
            margin-bottom: 10px;
          &:hover{
            background:@rect-hover-background;
          }
          .Module_Title {
            background: @rect-title-bckground;
            height: 35px;
            line-height: 35px;
            padding-left: 12px;
            color: @rect-title-color;
            text-shadow: 1px 1px 5px black;
            border-bottom: 1px dotted  rgba(255,255,255,0.1);
            font-weight: bold;
            transition: padding .5s;
            font-size: 1rem !important;
                        border-radius: @rect-border-radius;
            &:hover
            {
              padding-left: 20%
            }
        }
        .page_container {
          padding: 10px 10px;
        }
    }
}


/*右边*/
#Html_Right {
  .FlexSize(.4);
  margin-left: 12px;
}
/*左边*/
#Html_Left {
  .FlexSize(1);
}

/*---------------------*/
@media screen and (max-width:780px) {
  #Html_Left .Index_Left_zdtj>div ul {
    .FlexFlow;
  }
  #Html_Container {
    display: block;
    .FlexFlow;
  }
  #Html_Right{
    width: auto;
    margin-left: 0;
    position: static !important;
  }
}

/*搜索文章模块*/
.serachArticle input{
  border: 2px solid @BASE-COLOR*1.3;
  padding-left: 3px;
  height: 30px;
  line-height: 25px;
  font-weight: bold;
  background: @BASE-COLOR;
  transition: background 1s;
  color:white;
  width:25%;
  &:nth-child(1){
        width:75% ;
        float:left;
      }
}

input{
    outline: none;
}
/*文章归档*/
.Module_WZGD {
    color:white;
  max-height: 400px;
    .page_container ul {
      font-weight: bold;
      li{
        border-bottom: 1px dashed #666;
        padding: 5px 0;
        text-shadow: 1px 1px 5px black;
        ul{
          display: none;
          li{
            padding-left: 20%;
            .iconFont {
              padding-right: 3px
            }
          }
        }
        .iconFont{
          font-size: 1rem;
          color: white;
          text-shadow: 1px 1px 1px blue
      }
    }
    }
  .Model_WZGD2Title {
    border: 2px solid @BASE-COLOR*1.3;
    height: 30px;
    line-height: 25px;
    outline: 2px solid black;
    font-weight: bold;
    background: @BASE-COLOR/1.2;
    transition: background 1s;
    cursor:pointer;
    &:hover,.serachArticle input:hover {
      background:@BASE-COLOR*1.2;
      border-color: rgba(255,255,255,0.5);
    }
    .iconFont {
      display: inline-block;
      width: 32px;
      text-align: center;
      background: rgba(0,0,0,0.1);
      font-size: 1rem;
      margin-right: 5px
    }
  }
  ul {
    background: rgba(0,0,0,0.1);
    display: none;
    border: 1px dashed rgba(0,0,0,0.1);
    li{
      padding-left: 70px;
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid rgba(0,0,0,0.2);
      transition: background 1s;
      &:hover{
        background: rgba(0,0,0,0.2)
      }
      a{
        font-weight: bold;
        display: block
      }
    }
  }
}

/*标签*/
.Module_TAG .page_container {
  text-shadow: 1px 1px 3px rgba(255,255,255,0.5)
}
/**/

.List_Right_Top03_zjfk {
  padding-left: 8px;
  padding-bottom: 7px;
  a{
    display: inline-block;
    margin: 4px 1.5px;
    border: 1px dashed white;
    img{
      width: 32px;
      height: 32px
    }
  }
}

//选中的背景色
::selection {
  background: @SELECT-BACKGROUND;
  color:@SELECT-COLOR
}

/*选项卡*/
.Module_TAB{
  h4 {  background: @rect-title-bckground;
  ;border-radius: 5px;
    height: 31px;
    line-height: 31px;
    strong {
      cursor:pointer;
      color: @rect-title-color;
      display: inline-block;
      width: 25%;
      text-align: center;
      float: left;
      .overflow(30%);
      border-radius: 5px;
    }
    .selectPage {
      color: @BASE-COLOR;
    }
  }
  ul li .iconFont {
    font-size: 1rem
  }
}

/*文章列表*/
.articlePage {
  background: rgba(0,0,0,0.4);
  min-height: 100px;
  padding: 20px;
  margin-bottom: 13px;
  position: relative;
  padding-bottom:10px;
  transition:  all .3s;border-radius: 5px;

  &::after{
    content: attr(data-date);
    display: inline-block;
    height: 23px;
    background:#d9534f;
    position: absolute;
    top: -6px;
    right: 10px;
    border-radius: 5px;
    font-family: Lucida Console, Georgia;
    padding: 0 6px;
    text-align: center;
    line-height: 26px;
    font-weight: bold;
    color:white;
  }
  .head  {
    a {
      min-height: 25px;
      line-height: 25px;
    }
    .label {
      float: left;
      display: inline-block;
      background: #d9534f;
      height: 25px;
      color: white !important;
      line-height: 25px;
      padding: 0 10px;
      font-size: .9rem;
      position: relative;
      margin-right: 10px;
      &:after{
        content: "";
        display: inline-block;
        border-left: 5px solid #d9534f;
        border-bottom: 5px solid transparent;
        border-top: 5px solid transparent;
        position: absolute;
        right: -5px;
        top: 25%
      }
      &:hover{
        background: #ff5240
      }
    }
    h2{
      a{
        .overflow(80%);
        transition: all .5s;
        font-size:1.2rem;
      }
    }
  }
  .article_content {
     padding-top: 10px;
    .line-overflow(100%);
    .DisplayFlex;
    .FlexFlow(row);
    clear: both;
    .article_content_leftImg{
      max-height: 120px;
      max-width: 200px;
      border: 1px solid #00a67c;
      background: #00a67c;
      padding: 3px;
      margin-right: 10px;
      .FlexSize(1);
      overflow: hidden;
      border-radius: 5px;
      img{
        display:block;
        width: 100%;
        height: 100%;
        transition: all .5s;
        border-radius: 5px;
        &:hover{
          transform: scale(1.2, 1.2);
        }
      }
    }
    .article_content_Right {
      .FlexSize(3);
      line-height: 24px;
      p{
        .line-overflow(3);
      }
    }
  }

  .article_content_info {
    font-size: .8rem;
    text-align: right;
    width: 100%;
    height: 30px;
    line-height: 30px;
    margin-top:10px;
    overflow: hidden;
    span{
      display: inline-block;
      padding-right: 15px;
      line-height: 30px;
      m{
        font-size:1rem;
      }
    }
    .iconFont {
      margin-right: 5px;
      line-height: 3px;
    }
  }
}
.articlePage:hover,.Index_Left_zdtj>div ul li dl:hover,.Model_WZLB .page_container .Model_WZLB_arti dl:hover {
  background:rgba(0,0,0,0.6);
}

/*联系信息*/
.Module_LXXX {
  min-height: 150px;
  letter-spacing: 1px;
  overflow: hidden;
  background:rgba(0,0,0,0.1);
  dt{
    float: left;
    padding-right: 8px
  }
  dd{
    white-space: nowrap;
    line-height: 21px;
    height: 21px
  }
  .showImg {
    height: 146px;
    width: 100px;
    border: .4em inset @BASE-COLOR;
    transition: border .5s
  }
}

/*通用UL列表的框架的CSS*/
.Model_ul ul {
  text-shadow: 2px 2px 3px black;
  li{
    line-height: 30px;
    border-bottom: 1px dotted @BASE-COLOR/3;
    padding-right: 5px;
   .overflow(100%);

    .iconFont {
      font-weight: bold;
      font-size: 1.2rem;
      padding-right: 5px;
      color:@BASE-COLOR2;
      transition: transform 1s;
      text-shadow: 1px 1px 5px black
    }
    &:hover .iconFont {
      color: @font-color;
      transform: rotate(360deg)
    }

  }

}

/*底部CSS*/
#Foot_Top {
  background: black;
  height: 38px;
  line-height: 38px;
  li{
    font-size: 12px!important
  }
}
#Foot_Middle {
  a{
    color: #ccc;
  }
  min-height: 150px;
  background: #242221;
  display: flex;
    display: -ms-flexbox;
  padding: 10px 0;
  background: @foot-background;
  .FT_Left {
    .FlexSize(1);
    text-align: right;
    border-right: 1px solid rgba(255,255,255,0.4);
    padding-right: 20px;
    ul{
      display: inline-block;
      margin: 0 20px;
      li{
        line-height: 22px;
        height: 22px
      }
    }
  }
  .FT_Middle {
   .FlexSize(2);
    padding-left: 2%;
    border-left: 1px solid black;
    border-right: 1px solid rgba(255,255,255,0.4);
    ul li a{
      display: inline-block;
      background: #393939;
      height: 28px;
      padding: 0 10px;
      line-height: 28px;
      margin: 3px 0;
      transition: all 1.5s;
      &:hover{
        background: #e7769e;
        color: white;
        border-radius: 40px 0 40px 0
      }
    }
  }
  .FT_Right {
   .FlexSize(1.5);
    padding-left: 2%;
    border-left: 1px solid black;
    li a{
      font-size: 40px!important;
      margin: 0 10px;
      transition: all 1s;
      color: @BASE-COLOR;
      &:hover{
        color: @font-color
      }
    }
  }
  .FT_Left h5, h5, .FT_Right h5 {
    letter-spacing: 4px;
    margin: 8px 0;
    font-size: .7rem
  }
  .FT_Middle ul li, .FT_Right li {
    display: inline-block
  }

}

/*多说的CSS*/
.ds-recent-comments, .ds-comment, .ds-recent-comments a {
  text-shadow: none!important;
  color: white!important
}
#ds-recent-comments li.ds-comment {
  border-top: 0;
  border-bottom: 1px dashed rgba(26, 188, 156,0.3)
}

#ds-reset .ds-comment-body #ds-ctx{
    background-color: @BASE-COLOR/3;
    border-radius: 5px;
    
       border-color: @BASE-COLOR2;   
       color: white !important ;
       a{
           color: @BASE-COLOR2*2 !important;
       }
       .ds-ctx-entry{
          border-bottom: 0px !important; 
       }
}

#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-nth{
    color: @BASE-COLOR2*2 !important;
}
#ds-thread #ds-reset .ds-comment-body p, #ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-content
.ds-thread-title, .ds-time {
  color:  white !important
}
.ds-comment-body{
           background: @BASE-COLOR/4 !important;
 }
 .ds-post-button{background:@BASE-COLOR !important;color:white !important;}
 .ds-post-toolbar{border: 1px solid @BASE-COLOR !important;border-right: 0px !important;}
 .ds-textarea-wrapper{border-color: @BASE-COLOR/2 !important;}
 #ds-reset .ds-gradient-bg{
     background:@BASE-COLOR/4 !important;
 }
 #ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current
 {
     background: @BASE-COLOR2;
 }
 .ds-comments-info{
    border-color:@BASE-COLOR2 !important;
}
.ds-icon{color: @BASE-COLOR2*2 !important;}

/*分页按钮的CSS*/
.page {
  color:black;font-family: "Romantic" !important;
  a{
    color:white;font-size:0.5rem;
  }
  a,span{
    display: inline-block;
    transition: all 1s;
    margin-top: 2px;
    text-align: center;
    border-radius: 50px;
    margin-right: 3px;
    padding: 2px 7px;
    font-weight: bold;
    background: @BASE-COLOR2/1.5;transition:all 1s;
  }
  span{
    background: @BASE-COLOR2
  }
  a:hover{
    background:@BASE-COLOR;
    color:black;
  }
  .next,.prev{
    font-family: "iconFont" !important;
  }
}


//空提示
.nullTitle a, .nullTitle .iconFont {
  text-align: center;
  font-size: 2rem!important;
  color: @BASE-COLOR;
  display: block;
  line-height: 100px
}
/*空内容提示的CSS*/
.emptyTips {
  text-align: center;
  line-height: 150px;
  font-size: 1.5rem
}
//按钮
.btn {
  display: inline-block;
  padding: 3px 8px;
  margin-bottom: 0;
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  transition:all .2s;
}
.btn-success {
  color: #fff;
  background-color:@BASE-COLOR/1.2;
  border-color:@BASE-COLOR;
}

.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active{
  background-color:  @BASE-COLOR/1;
  border-color: @BASE-COLOR*5;color: #fff;
}

//头部

#Header_Head {
    min-height: 20px;
    width: 100%;
    background:@BASE-COLOR;
    margin-bottom: 10px;
    .Head_Top {
        background: @BASE-COLOR;
        height: 30px;
        line-height: 30px;
        position: fixed;
        text-align: center;
        font-size: @font-size+0.2 !important;
        top: 0;
        z-index: 3;color: @BASE-COLOR2*2;
        .overflow(100%);
}

  .Menu {
      .FlexFlow(row wrap);
      .DisplayFlex;
 
    .Logo {
        height: 70px;
        img {
                width: 100%;
                height: 100%;
            }
    }
        .animenu {
           
            .FlexSize(1);
            .animenu__toggle { outline: none;
                transition: all .5s;
                background: @BASE-COLOR/1.3;
                 width: 100%;border-radius:0px;
                &:hover{
                    background:@BASE-COLOR/1.1;
                }
             }
          nav .animenu__nav{
              background: @BASE-COLOR;
              li{
                   border-color: rgba(0,0,0,0.1);
                   li{
                       min-width: 150px
                   }
                   a{
                         color: black;
                            height: 75px;
                            line-height: 60px;
                            font-weight: bold;
                            transition: all .5s;
                            font-family: @font-family;
                            &:hover{
                                 background: RGBA(0,0,0,0.2);
                                 transition: all .5s;
                                 color: white;
                            }
                   }
              }
          }
        }
    
}  

}

@media screen and (max-width:767px) {
    .Menu {
        display:block !important;
        .animenu__nav>li>a {
            height: 40px !important;
            line-height: 22px !important
        }
    }
    
}

#returnTOP {
    opacity: 0.2;
    background: @BASE-COLOR;
    position: fixed;
    right: 8px;
    display: none;
    z-index: 99999;
    width: 40px;
    height: 35px;
    color:@BASE-COLOR2;
    text-align: center;
    line-height: 35px;
    bottom: 20px;
    transition: all .4s;
    &:hover{
         opacity: 1;
    }
    .iconFont {
         font-size: 1.5rem
    }
}


#player {
    background: @BASE-COLOR !important;
    color: white !important;
}

/*动画*/

.enter-down-bounce {
    -webkit-animation: enterDownBounce 1s linear;
    -moz-animation: enterDownBounce 1s linear;
    -ms-animation: enterDownBounce 1s linear;
    -o-animation: enterDownBounce 1s linear;
    animation: enterDownBounce 1s linear;
    opacity: 1!important;
}

.enter-up-bounce {
    -webkit-animation: enterUpBounce 1s linear;
    -moz-animation: enterUpBounce 1s linear;
    -ms-animation: enterUpBounce 1s linear;
    -o-animation: enterUpBounce 1s linear;
    animation: enterUpBounce 1s linear;
    opacity: 1!important;
}

.enter-left-bounce {
    -webkit-animation: enterLeftBounce 1s linear;
    -moz-animation: enterLeftBounce 1s linear;
    -ms-animation: enterLeftBounce 1s linear;
    -o-animation: enterLeftBounce 1s linear;
    animation: enterLeftBounce 1s linear;
    opacity: 1!important;
}
.enter-right-bounce {
    -webkit-animation: enterRightBounce 1s linear;
    -moz-animation: enterRightBounce 1s linear;
    -ms-animation: enterRightBounce 1s linear;
    -o-animation: enterRightBounce 1s linear;
    animation: enterRightBounce 1s linear;
    opacity: 1!important;
}
/* ENTER RIGHT BOUNCE */
@-webkit-keyframes enterRightBounce {
    0% {
        -webkit-transform:translateX(220px);  opacity: 0;
    }50%{
        -webkit-transform:translateX(0px); 
    }70%{-webkit-transform:translateX(8px); }
    
    100%{
        -webkit-transform:translateX(0);  opacity: 1;
    }
}
@-moz-keyframes enterRightBounce {
    0% {
        -moz-transform:translateX(220px);  opacity: 0;
    }50%{
        -moz-transform:translateX(0px); 
    }70%{-moz-transform:translateX(8px); }
    
    100%{
        -moz-transform:translateX(0);  opacity: 1;
    }
}
@-o-keyframes enterRightBounce {
    0% {
        -o-transform:translateX(220px);  opacity: 0;
    }50%{
        -o-transform:translateX(0px); 
    }70%{-o-transform:translateX(8px); }
    
    100%{
        -o-transform:translateX(0);  opacity: 1;
    }
}
@-ms-keyframes enterRightBounce {
    0% {
        -ms-transform:translateX(220px);  opacity: 0;
    }50%{
        -ms-transform:translateX(0px); 
    }70%{-ms-transform:translateX(8px); }
    
    100%{
        -ms-transform:translateX(0);  opacity: 1;
    }
}
@keyframes enterRightBounce {
    0% {
        transform:translateX(220px);  opacity: 0;
    }50%{
        transform:translateX(0px); 
    }70%{transform:translateX(8px); }
    
    100%{
        transform:translateX(0);  opacity: 1;
    }
}

/* ENTER LEFT BOUNCE */
@-webkit-keyframes enterLeftBounce {
    0% {
        -webkit-transform:translateX(-220px);  opacity: 0;
    }50%{
        -webkit-transform:translateX(0px); 
    }70%{-webkit-transform:translateX(-8px); }
    
    100%{
        -webkit-transform:translateX(0);  opacity: 1;
    }
}
@-moz-keyframes enterLeftBounce {
    0% {
        -moz-transform:translateX(-220px);  opacity: 0;
    }50%{
        -moz-transform:translateX(0px); 
    }70%{-moz-transform:translateX(-8px); }
    
    100%{
        -moz-transform:translateX(0);  opacity: 1;
    }
}
@-o-keyframes enterLeftBounce {
    0% {
        -o-transform:translateX(-220px);  opacity: 0;
    }50%{
        -o-transform:translateX(0px); 
    }70%{-o-transform:translateX(-8px); }
    
    100%{
        -o-transform:translateX(0);  opacity: 1;
    }
}
@-ms-keyframes enterLeftBounce {
    0% {
        -ms-transform:translateX(-220px);  opacity: 0;
    }50%{
        -ms-transform:translateX(0px); 
    }70%{-ms-transform:translateX(-8px); }
    
    100%{
        -ms-transform:translateX(0);  opacity: 1;
    }
}
@keyframes enterLeftBounce {
    0% {
        transform:translateX(-220px);  opacity: 0;
    }50%{
        transform:translateX(0px); 
    }70%{transform:translateX(-8px); }
    
    100%{
        transform:translateX(0);  opacity: 1;
    }
}

/* ENTER UP BOUNCE */
@-webkit-keyframes enterUpBounce {
    0% {
        -webkit-transform:translateY(220px);  opacity: 0;
    }50%{
        -webkit-transform:translateY(0px); 
    }70%{-webkit-transform:translateY(20px); }
    
    100%{
        -webkit-transform:translateY(0);  opacity: 1;
    }
}
@-moz-keyframes enterUpBounce {
    0% {
        -moz-transform:translateY(220px);  opacity: 0;
    }50%{
        -moz-transform:translateY(0px); 
    }70%{-moz-transform:translateY(20px); }
    
    100%{
        -moz-transform:translateY(0);  opacity: 1;
    }
}
@-o-keyframes enterUpBounce {
    0% {
        -o-transform:translateY(220px);  opacity: 0;
    }50%{
        -o-transform:translateY(0px); 
    }70%{-o-transform:translateY(20px); }
    
    100%{
        -o-transform:translateY(0);  opacity: 1;
    }
}
@-ms-keyframes enterUpBounce {
    0% {
        -ms-transform:translateY(220px);  opacity: 0;
    }50%{
        -ms-transform:translateY(0px); 
    }70%{-ms-transform:translateY(20px); }
    
    100%{
        -ms-transform:translateY(0);  opacity: 1;
    }
}
@keyframes enterUpBounce {
    0% {
        transform:translateY(220px);  opacity: 0;
    }50%{
        transform:translateY(0px); 
    }70%{transform:translateY(20px); }
    
    100%{
        transform:translateY(0);  opacity: 1;
    }
}


/* ENTER DOWN BOUNCE */
@-webkit-keyframes enterDownBounce {
    0% {
        -webkit-transform:translateY(-220px);  opacity: 0;
    }50%{
        -webkit-transform:translateY(0px); 
    }70%{-webkit-transform:translateY(-20px); }
    
    100%{
        -webkit-transform:translateY(0);  opacity: 1;
    }
}
@-moz-keyframes enterDownBounce {
    0% {
        -moz-transform:translateY(-220px);  opacity: 0;
    }50%{
        -moz-transform:translateY(0px); 
    }70%{-moz-transform:translateY(-20px); }
    
    100%{
        -moz-transform:translateY(0);  opacity: 1;
    }
}
@-ms-keyframes enterDownBounce {
    0% {
        -ms-transform:translateY(-220px);  opacity: 0;
    }50%{
        -ms-transform:translateY(0px); 
    }70%{-ms-transform:translateY(-20px); }
    
    100%{
        -ms-transform:translateY(0);  opacity: 1;
    }
}
@-o-keyframes enterDownBounce {
    0% {
        -o-transform:translateY(-220px);  opacity: 0;
    }50%{
        -o-transform:translateY(0px); 
    }70%{-o-transform:translateY(-20px); }
    
    100%{
        -o-transform:translateY(0);  opacity: 1;
    }
}
@keyframes enterDownBounce {
    0% {
        transform:translateY(-220px);  opacity: 0;
    }50%{
        transform:translateY(0px); 
    }70%{transform:translateY(-20px); }
    
    100%{
        transform:translateY(0);  opacity: 1;
    }
}
